<template>
	<view>
		<view class="person-head">
			<cmd-avatar src="https://avatar.bbs.miui.com/images/noavatar_small.gif" @click="fnInfoWin" size="lg"
				:make="{'background-color': '#fff'}"></cmd-avatar>
			<view class="person-head-box">
				<view class="person-head-nickname">Slimmer</view>
				<view class="person-head-username">ID：slimmer9501</view>
			</view>
		</view>
		<view class="person-list">
			<cmd-cell-item title="我的轨迹" slot-left arrow>
				<cmd-icon type="bullet-list" size="24" color="#368dff"></cmd-icon>
			</cmd-cell-item>
			<cmd-cell-item title="消息通知" slot-left arrow @click="isShowInfoLog=false">
				<cmd-icon type="message" size="24" color="#368dff"></cmd-icon>
			</cmd-cell-item>
			<cmd-cell-item title="系统设置" slot-left arrow @click="navigateTo('/pages/my/settings')">
				<cmd-icon type="settings" size="24" color="#368dff"></cmd-icon>
			</cmd-cell-item>
			<cmd-cell-item title="检查版本" :addon="appVersion" slot-left @click="isShowInfoLog=true">
				<cmd-icon type="alert-circle" size="24" color="#368dff"></cmd-icon>
			</cmd-cell-item>
		</view>
		<view v-if="isShowInfoLog">
			<view v-for="(item,index) in infoLog" :key="index" class="log">
				<view> {{index}}</view>
				<view>{{infoLog[index]?infoLog[index]:"."}}</view>
			</view>

		</view>
	</view>
</template>

<script>
	import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
	import cmdIcon from "@/components/cmd-icon/cmd-icon.vue"
	import cmdCellItem from "@/components/cmd-cell-item/cmd-cell-item.vue"

	export default {
		components: {
			cmdAvatar,
			cmdCellItem,
			cmdIcon
		},
		data() {
			return {
				isShowInfoLog:false,
				infoLog: JSON.parse(JSON.stringify(uni.getAppBaseInfo())),
				appVersion: uni.getAppBaseInfo().appVersion + "(" + uni.getAppBaseInfo().appVersionCode + ")"
			};
		},
		onLoad() {
			console.log(uni.getAppBaseInfo())
		},
		methods: {
			showInfo() {
				
			},
			/**
			 * 打开用户信息页
			 */
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			fnInfoWin() {
				uni.navigateTo({
					url: '/pages/user/info/info'
				})
			}
		}
	}
</script>

<style>
	.person-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 200px;
		padding-left: 20px;
		background: linear-gradient(to right, #365fff, #36bbff);
	}

	.person-head-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		margin-left: 10px;
	}

	.person-head-nickname {
		font-size: 18px;
		font-weight: 500;
		color: #fff;
	}

	.person-head-username {
		font-size: 14px;
		font-weight: 500;
		color: #fff;
	}

	.person-list {
		line-height: 0;
	}

	.log view {
		width: 50%;
		margin: 0 auto;
		text-align: center;
		float: left;
	}
</style>